<!DOCTYPE html>
<html>

<head>
    <title></title>
    <meta charset="utf-8">
    <link rel="stylesheet" type="text/css" href="bootstrap/css/bootstrap.min.css">
    <link rel="stylesheet" type="text/css" href="css/normalize.css">
    <link rel="stylesheet/less" type="text/css" href="css/vtable.less">
    <style type="text/css">
    .myStyle {
        width: 48%;
        display: inline-block;
    }
    
    .myStyle2 {
        border-bottom: 1px solid;
    }
    </style>
</head>

<body id="app">
    <h1 style="padding:10px;">客户端模式：</h1>
    <div class="vtable myStyle" id="vtable"></div>
    <div class="vtable myStyle" id="vtable2"></div>
    <div class="vtable myStyle2" id="vtable3"></div>
    <h1 style="padding:10px;">服务端模式：</h1>
    <div class="vtable" id="vtable4"></div>

    <!--示例编辑框，如果有更复杂的需求，请重写此框，当然，可能你需要在此框中加入vue实例-->
    <div class="modal fade" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel">
        <div class="modal-dialog" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                    <h4 class="modal-title" id="exampleModalLabel">New message</h4>
                </div>
                <div class="modal-body">
                    <form>
                        <div class="form-group">
                            <label for="recipient-name" class="control-label">Recipient:</label>
                            <input type="text" class="form-control" id="recipient-name">
                        </div>
                        <div class="form-group">
                            <label for="message-text" class="control-label">Message:</label>
                            <textarea class="form-control" id="message-text"></textarea>
                        </div>
                    </form>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
                    <button type="button" class="btn btn-primary">Send message</button>
                </div>
            </div>
        </div>
    </div>

    <script type="text/javascript" src="js/jquery.js"></script>
    <script type="text/javascript" src="js/vue.js"></script>
    <script type="text/javascript" src="js/less.js"></script>
    <script type="text/javascript" src="bootstrap/js/bootstrap.min.js"></script>
    <script type="text/javascript" src="js/vtable.js"></script>
    <script type="text/javascript">
    /**
                     * makeVtable(config);
                     *
                     * config={
                        thead = thead || [{ name: "noData", data: "noData" }];//表头数据
                        tbody = tbody || [
                            [{ value: "noData" }]
                        ];//表体数据
                        edit=edit || false;//是否开启编辑模式
                        mode = mode || "person"; //两种模式，客户端模式（person），服务器端模式（server）
                        searchObj = searchObj || { content: "" }; //搜索内容
                        sortObj = sortObj || [{ columnIndex: 0, sortWay: "asc" }]; //排序字段
                        dataUrl = dataUrl || ""; //开启服务模式时有效
                        pageLength = pageLength || 10; //每页显示多少条
                        total = total || 0; //一共多少条
                        nowPage = nowPage || 1;//默认显示第一页
                        pageMenu = pageMenu || [10, 20, 50, 100];//每页显示多少条选项
                        tableContainerMaxHeight = tableContainerMaxHeight || 500;//表格最大高度，默认500px
                     * }
                     */

    $(function() {
        $.ajax({
            url: "http://localhost:3000/makeData",
            success: function(data) {
                data.pageLength = 50;
                data.edit=true;
                var vm = makeVtable(data);
            }
        });

        $.ajax({
            url: "http://localhost:3000/makeData",
            success: function(data) {
                data.pageLength = 50;
                data.el = "#vtable2";
                makeVtable(data);
            }
        });

        $.ajax({
            url: "http://localhost:3000/makeData",
            success: function(data) {
                data.el = "#vtable3";
                data.pageLength = 50;
                data.edit = true;
                data.url = "http://localhost:3000/vtable";
                var vm = makeVtable(data);
                // console.dir(vm);
                // 如果需要在编辑框加入复杂逻辑，建议重写rowEdit方法，如下已经列出导入编辑框的必要数据
                vm.rowEdit = function(e) {
                    var target = e.target;
                    var rowData = $(target).parents("tr")[0].__v_frag.raw; //对应行的数据
                    var columnData = vm.thead; //对应列的属性

                    //some code

                    //最后，如果是服务端模式，则需要更新一下数据
                    vm.reloadData(vm);
                }
            }
        });

        var vm = makeVtable({
            el: "#vtable4",
            url: "http://localhost:3000/vtable",
            mode: "server",
            edit: true,
            pageLength: 50
        });
    });
    </script>
</body>

</html>
